<template>
	<scroll-view scroll-y="true" show-scrollbar="false" class="content">
		<!-- <view class="surplus-content">
			<view>账户余额(元)</view>
			<view>{{y}}</view>
			<view>总收益(元)</view>
			<view>{{sy}}</view>
			<view>奖池收益(元)</view>
			<view>{{jcsy}}</view>
			<view>我的积分</view>
			<view>{{j}}</view>
			<view @click="gotopage" data-url="/pages/personal/withdrawal">提现</view>
			<view @click="gotopage" data-url="/pages/personal/transfer">转账</view>
		</view> -->
		
		<view class="bg_box">
			<view class="bg01"></view>
			<view class="assets_box" :style="type == '4'?'height:34vw':''">
				<view class="text_box">
					<view class="title">我的
					
						<label v-if="type == '2'">通证(总)</label>
						
							<label v-if="type == '1'">余额(总)</label>
						<label v-if="type == '3'">积分(总)</label>
					</view>
					<view class="num">{{y}}</view>
					<view class="text">累计收益：{{all_y}}</view>
	<!-- 				<view class="go_txt" v-if="type == '4'" @click="gotopage" data-url="/pages/personal/transfer_new/transfer_new" >去转账></view> -->
				</view>
			<!-- 	<view class="menu" @click="gotopage" data-url="/pages/personal/withdrawal" >提现</view> -->
				<block v-if="type == '6'">
				<!-- 	<view class="menu menu2" @click="gotopage" data-url="/pages/personal/transfer" >转账</view>
					<view class="menu menu4" @click="gotopage" data-url="/pages/personal/impawn/impawn" >质押</view> -->
				</block>
				<block v-if="type == '1'">
					<!-- <view class="menu menu5" @click="gotopage" data-url="/pages/personal/transfer_new/transfer_new2" >兑换</view> -->
				<!-- 	<view class="menu menu2" @click="gotopage" data-url="/pages/personal/withdrawal">提现</view>
					<view class="menu menu4" @click="gotopage" data-url="/pages/personal/transfer" >转账</view> -->
				</block>
				<block v-if="type=='2'">
					<view class="price">今日通证价格：{{jr}}</view>
				</block>
		<!-- 		<block v-if="type == '4'">
					<view class="ad_block">
						<view class="ad_box">
							<view class="ad_t1">限量发行</view>
							<view class="ad_t2">2023万枚</view>
						</view>
						<view class="tip_txt">今日通证价格：{{jr}}</view>
					</view>
				</block> -->
			</view>
		</view>
		
		<view class="total_title">
			<view class="line"></view>
			<view class="text">收益明细</view>
			<label class="iconfont t_icon" @click="seachItemChange">&#xe605;</label>
			<view class="t_seach" v-if="seach_show">
				<view class="t_s_con">
					<input class="t_s_input" type="text" v-model="seach_value" placeholder="输入关键字"/>
				</view>
				<view class="t_s_footer">
					<view class="t_s_btn" @click="resFun">重置</view>
					<view class="t_s_btn tsb2" @click="seachFun">搜索</view>
				</view>
			</view>
		</view>
		
		<!-- <view class="tab" v-if="type == '1'">
			<view class="btn" :class="tab == '' ? 'btn_s':''" @click="tabChange(0)">全部</view>
			<view class="btn" :class="tab == '1' ? 'btn_s':''" @click="tabChange(1)">每日释放</view>
			<view class="btn" :class="tab == '2' ? 'btn_s':''" @click="tabChange(2)">推荐奖励</view>
			<view class="btn" :class="tab == '3' ? 'btn_s':''" @click="tabChange(3)">居间服务费</view>
		</view> -->
		
		<block v-for="(item, index) in list" :key="'list' + index">
			<view class="list_box">
				<view class="text_box">
					<view class="text">{{item.name}}</view>
					<view class="time">{{item.time}}</view>
				</view>
				<view class="money" v-if="item.st==1">{{item.money}}
				<!-- <block v-if="item.dj==1">(冻结中,22天后兑换)</block>
				<block v-if="item.dj==2">(此单已退款,收益作废)</block> -->
				<view v-if="item.dj==1">(冻结中)</view>
				<view v-if="item.dj==2">(此单已退款,收益作废)</view>
				</view>
				
				<view class="money moneycolor" v-if="item.st==2">-{{item.money}}</view>
			</view>
		</block>
		
		<view class="mask" v-if="qr_show">
			<view class="mask_box">
				<view class="mask_con">
					<view class="m_tit">快捷收款码</view>
					<view class="qr_img">
						<tki-qrcode
						class="img"
							v-if="true"
							cid="qrcode"
							ref="qrcode"
							:val="name"
							:size="250"
							:onval="true"
							:loadMake="true"
							:usingComponents="true"
							@result="qrR"						
						/>
				<!-- 		<image class="img" src="../../static/raffle-wheel/raffle-wheel__action@3x.png"></image> -->
					</view>
					<view class="btn_box">
						<view class="btn" @click="qrShowChange(false)">关闭</view>
					</view>
				</view>
			</view>
		</view>
	
	</scroll-view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
		import Cfg from '../../common/config.js';
export default {
	data() {
		return {
			qr_show:false,
			list:[
			
			],
			jr:0,
			name:'',
			y:0,
			all_y:0,
		    sy:0,
			jcsy:0,
			sx:0,
			j:0,
			fff:0,
			seach_value:'',
			seach_show:false,
			type:1,
			
			tab:0,
		};
	},
	onShow() {
		    this.loadData()
	},
	onLoad(e){
		this.type=e.type;
	
	
	},
	methods: {
		tabChange(type){
			if(type == this.tab){return}
			this.tab = type;
			let value=['','每日释放','推','居间服务费'];
			this.seach_value = value[this.tab];
			this.loadData();
		},
		scanCodeFun(){
			uni.scanCode({
				scanType:['qrCode'],
				success: function (res) {
					uni.navigateTo({
						url:'/pages/personal/transfer?name='+res.result
					})
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
				}
			});
		},
		qrShowChange(_flag){
			this.qr_show = _flag;
		},
		loadData(){
				let me = this;
				
				me.Net._get('balance',{kw:me.seach_value,type:me.type},(res)=>{
					if(res.code ==1){
						me.list=res.data.con
					me.name=res.data.name
						me.y=res.data.sy
						me.jr=res.data.jr
						me.all_y=res.data.all_sy
					
						//console.log(res.data)
					}
				});
					},
		seachItemChange(){
			this.seach_show = !this.seach_show;
		},
		seachFun(){
			this.tab = 0;
			this.seach_show = false;
			this.loadData();
		},
		resFun(){
			this.seach_show = false;
			this.seach_value = '';
			this.tab = 0;
			this.loadData();
		},
		gotopage(e){
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url:url
			})
		}
		
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	padding-bottom: 0 !important;
	background-color: #fff;
}
.content {
	height: 100%;
}

.surplus-content {
	width: 690rpx;
	height: 490rpx;
	margin: 2vw auto 0vw;
	background-image: linear-gradient(#4d726f, #b4eef7);
	background-position: bottom;
	border-radius: 2vw;
	background-repeat: no-repeat;
	position: relative;

	view {
		font-weight: 500;
		color: #fff;
		position: absolute;
		left: 40rpx;
		&:nth-child(1) {
			font-size: 28rpx;
			top: 50rpx;
		}
		&:nth-child(2) {
			font-size: 48rpx;
			top: 100rpx;
		}
		&:nth-child(3) {
			font-size: 28rpx;
			top: 50rpx;
			left: 430rpx;
		}
		&:nth-child(4) {
			font-size: 48rpx;
			top: 100rpx;
			left: 430rpx;
		}
		&:nth-child(5) {
			font-size: 28rpx;
			top: 230rpx;
		}
		&:nth-child(6) {
			font-size:48rpx;
			top: 280rpx;
		}
		&:nth-child(7) {
			font-size: 28rpx;
			top: 230rpx;
			left: 430rpx;
		}
		&:nth-child(8) {
			font-size: 48rpx;
			top: 280rpx;
			left: 430rpx;
		}
		&:nth-child(9) {
		   font-size: 28rpx;
		   width: 220rpx;
		   height: 76rpx;
		   background-color: #fff;
		   text-align: center;
		   line-height: 76rpx;
		   border-radius: 40rpx;
		   top: 390rpx;
		   left: 40rpx;
		   color: #036f7c;
		  }
		  &:nth-child(10) {
		   font-size: 28rpx;
		   width: 220rpx;
		   height: 76rpx;
		   background-color: #fff;
		   text-align: center;
		   line-height: 76rpx;
		   border-radius: 40rpx;
		   top: 390rpx;
		   left: 430rpx;
		   color: #036f7c;
		  }
	}
}

.bill-content {
	width: 690rpx;
	margin: 30rpx auto;

	.title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		padding: 24rpx 0;
	}

	.body {
		width: 100%;
		background-color: #ffffff;
		border-radius: 12rpx;
		box-shadow: 0 0 4rpx 2rpx #f6f6f6;

		.bill-item {
			width: 90%;
			height: 120rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #f6f7f9;
			&:last-child {
				border-bottom: none;
			}

			.left {
				view {
					font-weight: 500;
					&:nth-child(1) {
						font-size: 30rpx;
						color: #333333;
					}
					&:nth-child(2) {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.right {
				font-size: 30rpx;
				font-weight: 500;
			}

			.red {
				color: #333;
			}
			.black {
				color: #ff4447;
			}
		}
	}
}

.list_box{
	width: 90%;
	margin: 0 auto;
	padding: 3vw 0;
	display: flex;
	align-items: center;
	background-color: #fff;
	border-bottom: 1px solid #e8e8e8;
	position: relative;
	z-index: 9;
}

.list_box .text_box{
	flex: 1;
}

.list_box .text_box .text{
	font-size: 3.5vw;
	color: #333;
	font-weight: bold;
}

.list_box .time{
	font-size: 3.2vw;
	color: #999;
	margin-top: 2vw;
}

.list_box .money{
	flex: 1;
	font-size: 4vw;
	color: #333;
	font-weight: bold;
	text-align: right;
}

.moneycolor{
	color: #f10020 !important;
}

.total_title{
	width: 90%;
	margin: 15vw auto 0;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 10;
	.t_seach{
		position: absolute;
		top: 100%;
		background: #ffffff;
		width: 100%;
		left: 0;
		border-radius: 0 0 15rpx 15rpx;
		box-shadow: 0 10rpx 10rpx #e2e2e2;
		.t_s_con{
			width: 100%;
			padding: 40rpx;
			.t_s_input{
				width: 100%;
				height: 70rpx;
				border-radius: 50rpx;
				border: 1rpx solid #c2c2c2;
				font-size: 30rpx;
				padding: 0 20rpx;
				text-align: center;
			}
		}
		.t_s_footer{
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 0 40rpx 40rpx;
			.t_s_btn{
				width: 130rpx;
				height: 65rpx;
				border-radius: 10rpx;
				border:1rpx solid #ababab;
				line-height: 65rpx;
				font-size: 30rpx;
				color: #333333;
				text-align: center;
			}
			.tsb2{
				color: #FFFFFF;
				background: #4d726f;
				border: none;
			}
		}
	}
}

.total_title .line{
	width: 2vw;
	height: 6vw;
	border-radius: 2vw;
	background-color: #4d726f;
	margin-right: 2vw;
}

.total_title .text{
	flex: 1;
	font-size: 4vw;
	color: #333;
	font-weight: bold;
}
.total_title .t_icon{
	font-size: 36rpx;
	color: #6f6f6f;
}

.tab{
	width: 100%;
	padding: 2vw 5% 0;
	display: flex;
	align-items: center;
	.btn:not(:first-of-type){
		margin-left: 20rpx;
	}
	.btn{
		padding: 8rpx 15rpx;
		border-radius: 13rpx;
		border: 1rpx solid #999;
		color: #999;
	}
	.btn_s{
		border: none !important;
		color: #ffffff;
		background: #ff3300;
	}
}


.bg_box{
	width: 100%;
	position: relative;
}

.bg_box .bg01{
	width: 100%;
	height: 30vw;
	background-color: #4d726f;
	
}

.bg_box .assets_box{
	width: 90%;
	position: absolute;
	top: 6vw;
	left: calc(50% - 45%);
	background-color: #fff;
	border-radius: 3vw;
	padding: 4vw 5vw;
	display: flex;
	align-items: center;
	box-shadow:  0 0 10rpx #9a9a9a;
}

.bg_box .assets_box .menu{
	width: 20vw;
	height: 8vw;
	line-height: 8vw;
	background-color: #4d726f;
	border-radius: 4vw;
	font-size: 28rpx;
	color: #fff;
	text-align:center;
	right: 40rpx;
	position: absolute;
	top: 8vw;
}
.bg_box .assets_box .menu2{
	background-color: #ff4447;
	top: 16vw;
}

.bg_box .assets_box .menu4{
	background-color: #ff9d00;
	top: 5vw;
}
.bg_box .assets_box .menu5{
	background-color: #ff4447;
	top: 11.5vw;
}
.bg_box .assets_box .price{
	position: absolute;
	padding: 8rpx 15rpx;
	color: #ffffff;
	font-size: 30rpx;
	border-radius: 10rpx;
	top: 4vw;
	right: 30rpx;
	background: #4d726f;
}
.bg_box .assets_box .text_box{
	flex: 1;
}

.bg_box .assets_box .text_box .title{
	font-size: 3.5vw;
	color: #333;
}

.bg_box .assets_box .text_box .num{
	font-size: 6vw;
	color: #333;
	font-weight: bold;
	margin-top: 3vw;
}

.bg_box .assets_box .text_box .go_txt{
	font-size: 3vw;
	color: #4d726f;
	padding-top: 15rpx;
	text-decoration: underline;	
}

.bg_box .assets_box .text_box .text{
	font-size: 3.5vw;
	color: #333;
	margin-top: 3vw;
}
	
.bg_box .assets_box .menu3{
	color: #333;
	text-align:center;
	right: 40rpx;
	position: absolute;
	top: 5vw;
	.icon{
		font-size: 50rpx;
	}
	.i_txt{
		font-size: 22rpx;
	}
}
.ad_block{
	.ad_box{
		border: 10rpx ;
		padding: 30rpx;
		border-radius: 25rpx;
		animation: mymove .5s infinite;
		-webkit-animation: mymove 0.5s infinite; /*Safari and Chrome*/
		.ad_t1{
			font-size: 28rpx;
			color: #ff2a00;
			font-weight: bold;
		}
		.ad_t2{
			font-size: 35rpx;
			font-weight: bold;
			padding-top: 5rpx;
			color: #ff2a00;
		}
	}
	.tip_txt{
		padding-top: 20rpx;
		font-size: 3vw;
		color: #ff2a00;
		font-weight: bold;
	}
}
@keyframes mymove {
	from {
		border: 3rpx solid #fe6500;
		box-shadow: 0px 0px 7px 2px rgb(254, 118, 0);
	}
	to {
		border: 3rpx solid #ffb300;
		box-shadow: 0px 1px 0px 0px rgba(255, 200, 1, 1.0);
	}
}
@-webkit-keyframes mymove {
	from {
		border: 3rpx solid #fe6500;
		box-shadow: 0px 0px 7px 2px rgb(254, 118, 0);
	}
	to {
		border: 3rpx solid #ffb300;
		box-shadow: 0px 1px 0px 0px rgba(255, 200, 1, 1.0);
	}
}
.mask{
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	.mask_box{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		.mask_con{
			width: 70%;
			border-radius: 25rpx;
			padding: 50rpx 40rpx;
			background: #ffffff;
			.m_tit{
				width: 100%;
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				text-align: center;
			}
			.qr_img{
				width: 100%;
				padding: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.img{
					width: 50vw;
					height: 50vw;
				}
			}
			.btn_box{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.btn{
					width: 50%;
					padding: 15rpx 0;
					text-align: center;
					font-size: 32rpx;
					background: #4d726f;
					border-radius: 25rpx;
					color: #ffffff;
				}
			}
		}
	}
}
	
	
</style>